<template>
  <div class='app-containers'>
    <el-card class="box-card">
      何鹏江
      <div class="btn_explain">
        <span>说明：目前支持学科和关键字条件筛选</span>
        <el-button type="success" size="small" icon="el-icon-edit" @click="$router.push('new')">新增试题</el-button>
      </div>

      <!-- 表单 -->
      <el-form ref="form" label-width="80px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select
                v-model="questionform.subjectID"
                placeholder="请选择学科"
                @change='getSubjectSimple'>
                <el-option
                  v-for="item in subjectList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select v-model="questionform.catalogID" placeholder="请选择">
                <el-option
                  v-for="item in subjectDetaillist"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select v-model="questionform.tags" placeholder="请选择">
                <el-option
                  v-for="item in subjectTagsList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input v-model="questionform.keyword" placeholder="根据题干搜索"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select v-model="questionform.questionType" placeholder="请选择">
                <el-option label="单选" value="1"></el-option>
                <el-option label="多选" value="2"></el-option>
                <el-option label="简答" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select v-model="questionform.difficulty" placeholder="请选择">
                <el-option label="简单" value="1"></el-option>
                <el-option label="一般" value="2"></el-option>
                <el-option label="困难" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select v-model="questionform.direction" placeholder="请选择">
                <el-option label="o2o" value="o2o"></el-option>
                <el-option label="外包服务" value="外包服务"></el-option>
                <el-option label="企业服务" value="企业服务"></el-option>
                <el-option label="互联网金融" value="互联网金融"></el-option>
                <el-option label="企业咨询" value="企业咨询"></el-option>
                <el-option label="互联网" value="互联网"></el-option>
                <el-option label="电子商务" value="电子商务"></el-option>
                <el-option label="其他" value="其他"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select v-model="questionform.creatorID" placeholder="请选择">
                <el-option
                  v-for="item in creatorList"
                  :key="item.id"
                  :label="item.username"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input v-model="questionform.remarks"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input v-model="questionform.shortName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市">
              <el-select
              v-model="questionform.province"
              @change="disposeAddress"
              placeholder="请选择活动区域"
              class="input_ib"
              style="margin-right: 2%;">
                <el-option
                  v-for="item in provinces"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
              <el-select v-model="questionform.city" placeholder="请选择活动区域" class="input_ib">
                <el-option
                  v-for="item in citys"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="">
              <div class="btn_right">
                <el-button size="small" @click="clearForm">清除</el-button>
                <el-button type="primary" size="small" @click="searchQuestion">搜索</el-button>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <!-- 消息提示 -->
      <el-alert
        type="info"
        show-icon>
        <template #title>
          数据一共 {{total}} 条
        </template>
      </el-alert>

      <!-- 主体表格 -->
      <el-table
        :data="questionData"
        style="width: 100%"
      >
        <el-table-column
          prop="number"
          label="试题编号"
          width="120">
        </el-table-column>
        <el-table-column
          prop="subject"
          label="学科"
          width="180">
        </el-table-column>
        <el-table-column
          prop="catalog"
          label="目录"
          width="180">
        </el-table-column>
        <el-table-column
          prop="questionType"
          label="题型"
          width="180"
          :formatter='questionTypes'>
        </el-table-column>
        <el-table-column
          prop="question"
          label="题干"
          width="280">
          <template v-slot='{row}'>
            {{row.question | html2Text}}
          </template>
        </el-table-column>
        <el-table-column
          prop="addDate"
          label="录入时间"
          width="180">
          <template v-slot='{row}'>
            {{row.addDate | parseTime}}
          </template>
        </el-table-column>
        <el-table-column
          prop="difficulty"
          label="难度"
          width="180"
          :formatter='difficultys'>
        </el-table-column>
        <el-table-column
          prop="creator"
          label="录入人"
          width="180">
        </el-table-column>
        <el-table-column
          width="180"
          label="操作">
          <template v-slot='{row}'>
              <el-button class="is-plains" size="small" type="primary" icon="el-icon-view" title="预览" circle @click="preview(row)"></el-button>
              <el-button class="is-plains" size="small" type="success" icon="el-icon-edit" title="编辑" circle @click="$router.push('new?id='+ row.id)"></el-button>
              <el-button class="is-plains" size="small" type="danger" icon="el-icon-delete" title="删除" circle @click="delQuestion(row)"></el-button>
              <el-button class="is-plains" size="small" type="warning" icon="el-icon-check" title="加入精选" circle @click="addDateQuestionChoice(row)"></el-button>

          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        background
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pageSize"
        layout="prev, pager, next,sizes, jumper"
        :total="total">
      </el-pagination>
    </el-card>

    <!-- 试题预览对话框 -->
    <QuestionsPreview v-if="questionsDialog" :questionsDialog.sync='questionsDialog' :row='row' />
  </div>
</template>

<script>
import { list, remove as questionRemove, choiceAdd, detail as questionDetail } from '@/api/hmmm/questions.js'
import { simple as subjectSimpe } from '@/api/hmmm/subjects.js'
import { simple as directorysSimpe } from '@/api/hmmm/directorys.js'
import { simple as tagsSimpe } from '@/api/hmmm/tags.js'
import { simple as creatorSimpe } from '@/api/base/users.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import QuestionsPreview from '../components/questions-preview.vue'
export default {
  data () {
    return {
      questionData: [{
        number: '1', // 试题编号
        subject: '1', // 学科
        catalog: '1', // 目录
        questionType: '1', // 题型
        question: '1', // 题干
        addDate: '1', // 录入时间
        difficulty: '1', // 难度
        creator: '1' // 录入人
      }],
      questionform: {
        subjectID: '', // 选择的学科数据
        catalogID: '', // 选择的二级目录数据
        tags: '', // 选择的标签
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        city: '', // 所在城市下属城市
        province: '' // 企业所属地域
      },
      currentPage: 1, // 当前页
      pageSize: 5, // 每页条数
      total: 0, // 总条数
      subjectList: [], // 学科列表

      subjectDetaillist: [], // 二级目录列表

      subjectTagsList: [], // 标签列表
      creatorList: [], // 录入人列表
      citys: [], // 所在城市下属城市
      provinces: [], // 企业所属地域
      questionsDialog: false, // 预览对话框开关
      row: {} // 预览对话框的数据

    }
  },

  components: {
    QuestionsPreview
  },

  computed: {

  },

  created () {
    this.loadSubjectSimple()
    this.loadCreatorSimpe()
    this.loadList()
    this.provinces = provinces()
  },

  methods: {
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.loadList()
    },
    async handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
      this.loadList()
    },

    // 选择地域后触发
    disposeAddress (val) {
      this.questionform.city = ''
      this.citys = citys(val)
    },

    // 获取学科简单列表
    async loadSubjectSimple () {
      const res = await subjectSimpe()
      this.subjectList = res.data
    },

    // 获取录入人列表
    async loadCreatorSimpe () {
      const res = await creatorSimpe()
      this.creatorList = res.data
    },

    // 获取二级目录 和 标签
    async getSubjectSimple () {
      const res = await directorysSimpe({ subjectID: this.questionform.subjectID })
      this.subjectDetaillist = res.data
      const res2 = await tagsSimpe({ subjectID: this.questionform.subjectID })
      this.subjectTagsList = res2.data
    },

    // 获取基础题库列表
    async loadList () {
      const res = await list({
        page: this.currentPage,
        pagesize: this.pageSize
      })
      this.questionData = res.data.items
      this.total = res.data.counts
    },

    // 点击搜索触发
    async searchQuestion () {
      // console.log(this.questionform)
      // const res = await list({
      //   page: this.currentPage,
      //   pagesize: this.pageSize,
      //   ...this.questionform
      // })
      // this.questionData = res.data.items
      // this.total = res.data.counts
      const form = {}
      for (const key in this.questionform) {
        if (this.questionform[key] !== '') {
          form[key] = this.questionform[key]
        }
      }
      let res = {}
      res = await list({
        page: this.currentPage,
        pagesize: this.pageSize,
        ...form
      })

      this.questionData = res.data.items
      this.total = res.data.counts
    },

    // 点击清除触发
    clearForm () {
      this.questionform = {
        subjectID: '', // 选择的学科数据
        catalogID: '', // 选择的二级目录数据
        tags: '', // 选择的标签
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        city: '', // 所在城市下属城市
        province: '' // 企业所属地域
      }
      this.subjectDetaillist = []
      this.subjectTagsList = []
      this.citys = []
    },

    // 点击预览
    async preview (row) {
      const res = await questionDetail({ id: row.id })
      this.questionsDialog = true
      console.log(res.data)
      this.row = res.data
      console.log(this.row)
    },

    // 点击删除
    delQuestion (row) {
      console.log(row)
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await questionRemove({ id: row.id })
        this.$message.success('删除成功')
        await this.loadList()
        if (!this.questionData.length) {
          this.currentPage--
          this.loadList()
        }
      }).catch(() => {})
    },

    // 点击加入精选题库
    async addDateQuestionChoice (row) {
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(async () => {
        await choiceAdd({
          id: row.id,
          choiceState: 1
        })
        this.$message.success('加入精选成功')
        await this.loadList()
        if (!this.questionData.length) {
          this.currentPage--
          this.loadList()
        }
      }).catch(() => {})
    },

    // 格式化题型
    questionTypes (row) {
      if (row.questionType === '1') {
        return '单选'
      } else if (row.questionType === '2') {
        return '多选'
      } else if (row.questionType === '3') {
        return '简答'
      }
    },

    // 格式化难度
    difficultys (row) {
      if (row.difficulty === '1') {
        return '简单'
      } else if (row.difficulty === '2') {
        return '一般'
      } else if (row.difficulty === '3') {
        return '困难'
      }
    }
  }
}
</script>

<style scoped lang='less'>
.app-containers {
  padding: 0 10px;
  margin: 10px 0;
}
.btn_explain {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;

  span {
    font-size: 12px;
    color: pink;
  }
}
.el-select {
  display: block;
}
.input_ib {
  display: inline-block;
  width: 48%;
}
.btn_right {
  display: flex;
  justify-content: flex-end;
}
.el-alert {
  margin-bottom: 15px;
}
::v-deep .el-pagination {
  margin-top: 20px;
  text-align: right;

  .el-pagination__jump {
    margin-left: 0;
  }
}
.el-button--primary.is-plains {
    color: #409eff;
    background: #ecf5ff;
    border-color: #b3d8ff;

    &:hover {
      background: #409eff;
      border-color: #409eff;
      color: #fff;
    }
}
.el-button--success.is-plains {
    color: #67c23a;
    background: #f0f9eb;
    border-color: #c2e7b0;

    &:hover {
      background: #67c23a;
      border-color: #67c23a;
      color: #fff;
    }
}
.el-button--danger.is-plains {
    color: #f56c6c;
    background: #fef0f0;
    border-color: #fbc4c4;

    &:hover {
      background: #f56c6c;
      border-color: #f56c6c;
      color: #fff;
    }
}
.el-button--warning.is-plains {
    color: #e6a23c;
    background: #fdf6ec;
    border-color: #f5dab1;

    &:hover {
    background: #e6a23c;
    border-color: #e6a23c;
    color: #fff;
}
}
</style>
